<template>
    <div class="datastatistics_page">
        <div class="top">
            <div class="top1_div1 top1_div">
                <p>1.37</p>
                <p>接受天然气累计(亿m³）</p>
            </div>
            <div class="top1_div2 top1_div">
                <p>4.26</p>
                <p>向下游用户输出累计(亿m³）</p>
            </div>
            <div class="top1_div3 top1_div">
                <p>3451</p>
                <p>当前总管存(亿m³）</p>
            </div>
            <!-- 第二个 -->
            <div class="top2_div1 top2_div" >
                <div >
                    <p>198%</p>
                    <p>今年完成率</p>
                </div>
                <div>
                    <p>
                        <span>42640</span>
                        <span>完成（万m³）</span>
                    </p>
                    <p>
                        <span>21525</span>
                        <span>计划（万m³）</span>
                    </p>
                </div>
            </div>
            <div class="top2_div2 top2_div" >
                <div>
                    <p>54%</p>
                    <p>今月完成率</p>
                </div>
                <div>
                    <p>
                        <span>996.72</span>
                        <span>完成（万m³）</span>
                    </p>
                    <p>
                        <span>1845</span>
                        <span>计划（万m³）</span>
                    </p>
                </div>
            </div>
             <div class="top2_div3 top2_div" >
                <div>
                    <p>52.79%</p>
                    <p>今日完成率</p>
                </div>
                <div>
                    <p>
                        <span>32.46</span>
                        <span>完成（万m³）</span>
                    </p>
                    <p>
                        <span>61.5</span>
                        <span>计划（万m³）</span>
                    </p>
                </div>
            </div>
            <!-- 第三个 -->
            <div class="top3_div1 top3_div" >
                <div>
                    <p>0</p>
                    <p>镇南向下游用户输出累计(亿m³）</p>
                </div>
                <div>
                   <p>0</p>
                    <p>绥阳向下游用户输出累计(亿m³）</p>
                </div>
            </div>
            <div class="top3_div2 top3_div" >
                <div>
                    <p>0</p>
                    <p>新舟向下游用户输出累计(亿m³）</p>
                </div>
                <div>
                   <p>0</p>
                    <p>湄潭向下游用户输出累计(亿m³）</p>
                </div>
            </div>
            <div class="top3_div3 top3_div" >
                <div>
                    <p>0</p>
                    <p>温水向下游用户输出累计(亿m³）</p>
                </div>
                <div>
                   <p>0</p>
                    <p>牛场向下游用户输出累计(亿m³）</p>
                </div>
            </div>

        </div>
        <div style="height:calc(100% - 100px);width:100%;display:flex;margin-top: 46px;">
             <!-- 内容 -->
            <div id="gaslinecounm"></div>
            <div style="height:100%;width:33.33%">
                <div id="changelinecounm"></div>
                <div id="gas2linecounm"></div>
            </div>
            <div style="height:100%;width:33.33%">
                <div id="change2linecounm"></div>
                <div id="gas3linecounm"></div>
            </div>
        </div>
    </div>
</template>
<script>
import * as echarts from 'echarts'
import { getLevelStatistics} from "@/api/statistics/index";
require('echarts/theme/macarons') // echarts theme
export default{
    data(){
        return{
            items:[],
            items2:[],
        }
    },
    mounted(){

        let legend={
           show:true,
          right:20,
          top:0,
          icon:'rect',
          itemWidth: 6, // 宽度
          itemHeight: 6, // 高度
          textStyle:{
            color:"white",
            fontSize:"12px",
          },
        }
        let grid= {top: 40 }
        let xAxis= {
          boundaryGap: false,
          name: "",
          splitLine: {
            show: true,
            //网格线
            lineStyle: {
              color: "rgba(168, 168, 168,0.2)"
            }
          },
          axisLine: {
            show: false //隐藏x轴线
          },
          axisTick: {
            show: false //隐藏x轴刻度
          },
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: "#7291a9"
            }
          }
        }
        let yAxis={
            type: "category",
          axisTick: {
            show: false //隐藏x轴刻度
          },
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: "#7291a9"
            }
          }
        }
        let title={
             left: 'left', // 标题居中
            top: 8, // 距离顶部20px
            textStyle:{
                color:"white",
                fontSize:16
            },
        }
        this.gaslinecounm(grid,xAxis,yAxis,title,legend)
        this.gas2linecounm(grid,xAxis,yAxis,title,legend)
        this.changelinecounm(grid,legend,title)
        this.change2linecounm(grid,xAxis,yAxis,title,legend)
            let xdata=[ ]
            let data1=[ ]
            let data2=[ ]
            let data3=[ ]
        getLevelStatistics().then(response => {
          if(response.code==200){
            response.data.map((res)=>{
              xdata.push(res.time)
              if(res.priority=='Ⅰ'){
                data1.push(res.num)
              }else if(res.priority=="Ⅱ"){
                data2.push(res.num)
              }else if(res.priority=="Ⅲ"){
                data3.push(res.num)
              }
            })
          }
           this.gas3linecounm(grid,xAxis,yAxis,title,legend,Array.from(new Set(xdata)),data1,data2,data3)
      });

    },
    methods:{
        //   柱状图
    gaslinecounm(grid,xAxis,yAxis,title,legend) {
        echarts.init(document.getElementById("gaslinecounm")).setOption({
         grid:grid,
        xAxis:xAxis,
        yAxis:{...yAxis,data:["大磏","冉七","道真","正安","务川","绥阳","新舟","瓮安","牛场","福泉"]},
        title:{...title, text:"累计输气量", },
        legend:{...legend,data:['完成量'],},
        series: [
          {
            name:"完成量",
            data:[45,12,25,12,12,56,32,1,5,6,72],
            type: "bar",
            label: {
              //数据显示的位置
              show: false, //数值是否显示
              rotate: 0, //数值显示的角度
              position: "right", //数值相对于柱状图显示的位置
              color: "#7dbdc2"
            },
            barWidth: "10", //柱的宽度
            color: "#FF903E",
            encode: {
              x: "",
              y: "product"
            }
          },
          {
            name:"",
            z:-1,
            barGap:"-100%",
            data:[0,0,0,0,0,0,0,0,0,0,0],
            type: "bar",
            label: {
              //数据显示的位置
              show: false, //数值是否显示
              rotate: 0, //数值显示的角度
              position: "right", //数值相对于柱状图显示的位置
              color: "#7dbdc2"
            },
            barWidth: "10", //柱的宽度
            color: "#B1AF9C",
            encode: {
              x: "",
              y: "product"
            }
          }
        ]
      })
    },
    gas2linecounm(grid,xAxis,yAxis,title,legend){
        echarts.init(document.getElementById("gas2linecounm")).setOption({
         grid:grid,
        xAxis:xAxis,
        yAxis:{...yAxis, data:["中东阳光","绥阳迈达盛","贵燃（遵义）","湄潭荣创","湄潭润途","贵州裕能","贵州裕能"]},
        title:{...title, text: '今年输气量' },
        legend:{...legend,data:['完成量','计划量'],},
        series: [
          {
            name:"完成量",
            data:[0,0,0,0,0,4263985260,0],
            type: "bar",
            label: {
              //数据显示的位置
              show: false, //数值是否显示
              rotate: 0, //数值显示的角度
              position: "right", //数值相对于柱状图显示的位置
              color: "#7dbdc2"
            },
            barWidth: "10", //柱的宽度
            color: "rgba(0, 169, 255, 1)",
            encode: {
              x: "",
              y: "product"
            }
          },
          {
            name:"计划量",
            z:-1,
            barGap:"-100%",
            data:[70000000,1750000,52500000,5250000,700000,84000000,1050000],
            type: "bar",
            label: {
              //数据显示的位置
              show: false, //数值是否显示
              rotate: 0, //数值显示的角度
              position: "right", //数值相对于柱状图显示的位置
              color: "#7dbdc2"
            },
            barWidth: "10", //柱的宽度
            color: "rgba(162, 224, 255, 1)",
            encode: {
              x: "",
              y: "product"
            }
          }
        ]
      });
    },
    // 折线图 输气量变化
    changelinecounm(grid,legend,title){
         echarts.init(document.getElementById("changelinecounm")).setOption({
        legend: {
          data:['用户1','用户2',"用户3"],
          ...legend,
        },
         title: {
            text: '今年输气完成率趋势变化', // 标题文本
           ...title
        },
        xAxis: {
          axisLabel: {
            //x轴文字的配置
            show: true,
            rotate: 0,
            textStyle: {
              color: "#849bbe"
            }
          },
          type: "category",
          boundaryGap: false,
          axisLine: {
            show: false //隐藏x轴线
          },
          axisTick: {
            show: false //隐藏x轴刻度
          },
          data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月"]
        },
        yAxis: {
          type: "value",
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
            color: "#849bbe"
            }
          },
          axisLine: {
            show: false //隐藏x轴线
          },
          axisTick: {
            show: false //隐藏x轴刻度
          },
          splitLine: {
            show: true,
            //网格线
            lineStyle: {
              type: "solid", //设置网格线类型 dotted：虚线 solid:实线
              color: "#10334a"
            }
          }
        },
        series: [
            {
            name:"用户1",
            data:[14,36,9,1,65,10,38,45,2,4],
            type: "line",
            symbol: "circle",
            symbolSize: 5,
             itemStyle: {
            color: "#36F097", // 点的颜色
            borderColor: "rgba(90, 63, 255, 0.20)", // 点边框颜色
             borderWidth: 5 // 点边框宽度
          },

            lineStyle: {
                color: "#36F097"
            },
            type: "line",
            areaStyle: {
                type: "default",
                //渐变色实现===
                color: new echarts.graphic.LinearGradient( 0,0, 0,1,
                //三种由深及浅的颜色
                [
                    {
                    offset: 0,
                    color: "#36F097"
                    },
                    {
                    offset: 1,
                    color: "rgba(90, 63, 255, 0.20)"
                    }
                ]
                )
            }
            },
           {
            name:"用户2",
           data:[65,15,15,28,86,56,85,79,69,85],
           type: "line",
            symbol: "circle",
            symbolSize: 5,
            itemStyle: {
            color: "#1ED6FF", // 点的颜色
            borderColor: "rgba(30, 214, 255, 0.20)", // 点边框颜色
             borderWidth: 5 // 点边框宽度
          },
            lineStyle: {
                color: "#1ED6FF"
            },
            type: "line",
            areaStyle: {
                type: "default",
                //渐变色实现===
                color: new echarts.graphic.LinearGradient( 0,0, 0,1,
                //三种由深及浅的颜色
                [
                    {
                    offset: 0,
                    color: "#1ED6FF"
                    },
                    {
                    offset: 1,
                    color: "rgba(30, 214, 255, 0.20)"
                    }
                ]
                )
            }
            },
         {
            name:"用户3",
           data:[65,85,125,228,86,86,89,96,101,205],
           type: "line",
          symbol: "circle",
          symbolSize: 5,
          itemStyle: {
            color: "#5A3FFF", // 点的颜色
            borderColor: "rgba(54, 240, 151, 0.20)", // 点边框颜色
             borderWidth: 5 // 点边框宽度
          },
          lineStyle: {
            color: "#5A3FFF"
          },
          type: "line",
          areaStyle: {
            type: "default",
            //渐变色实现===
            color: new echarts.graphic.LinearGradient( 0,0, 0,1,
              //三种由深及浅的颜色
              [
                {
                  offset: 0,
                  color: "#5A3FFF"
                },
                {
                  offset: 1,
                  color: "rgba(54, 240, 151, 0.20)"
                }
              ]
            )
          }
        },
        ],
      });
    },
    // change2linecounm(grid,xAxis,yAxis,title,legend){
    //      echarts.init(document.getElementById("change2linecounm")).setOption({
    //          grid:grid,
    //     xAxis:xAxis,
    //     yAxis:{...yAxis,data:["湄潭"],},
    //     title:{...title, text:"按场站统计今年报警", },
    //     legend:{...legend,data:['I 级','II 级','III 级'],},
    //     series: [
    //         {
    //        name:"I 级",
    //         type: 'bar',
    //         stack: '总量',
    //         label: {
    //            show: false,
    //             position: 'insideRight'
    //         },
    //         barWidth: "10", //柱的宽度
    //          color: "rgba(255, 57, 35, 1)",
    //         data: [4041]
    //     },
    //     {
    //         name: 'II 级',
    //         type: 'bar',
    //         stack: '总量',
    //         barWidth: "10", //柱的宽度
    //          color: "rgba(255, 209, 92, 1)",
    //         label: {
    //            show: false,
    //             position: 'insideRight'
    //         },
    //         data: [414]
    //     },
    //     {
    //         name: 'III 级',
    //         type: 'bar',
    //         stack: '总量',
    //         barWidth: "10", //柱的宽度
    //          color: "rgba(30, 214, 255, 1)",
    //         label: {
    //             show: false,
    //             position: 'insideRight'
    //         },
    //         data: [87]
    //     },
    //     ]
    //   });
    // },
    // gas3linecounm(grid,xAxis,yAxis,title,legend,uniqueArr,data1,data2,data3){
    //      echarts.init(document.getElementById("gas3linecounm")).setOption({
    //         // 坐标轴
    //         xAxis: {
    //             type: 'category',
    //             data: uniqueArr,
    //              boundaryGap: false,
    //                 splitLine: {
    //                     show: false,
    //                     //网格线
    //                     lineStyle: {
    //                     color: "rgba(168, 168, 168,0.2)"
    //                     }
    //                 },
    //                 axisLine: {
    //                     show: false //隐藏x轴线
    //                 },
    //                 axisTick: {
    //                     show: false //隐藏x轴刻度
    //                 },
    //                 axisLabel: {
    //                     //x轴文字的配置
    //                     show: true,
    //                    margin: 10 , // 增加标签与轴线的距离
    //                     textStyle: {
    //                     color: "#7291a9"
    //                     }
    //                 }
    //         },
    //         yAxis: {
    //            type: 'value',
    //             offset: 10  ,// 调整y轴的偏移量
    //            splitLine: {
    //                     show: true,
    //                     //网格线
    //                     lineStyle: {
    //                     color: "rgba(168, 168, 168,0.2)"
    //                     }
    //                 },
    //                 axisLine: {
    //                     show: false //隐藏x轴线
    //                 },
    //                 axisTick: {
    //                     show: false //隐藏x轴刻度
    //                 },
    //                 axisLabel: {
    //                     //x轴文字的配置
    //                     show: true,
    //                     textStyle: {
    //                     color: "#7291a9"
    //                     }
    //                 }
    //         },
    //     title:{...title, text:"报警数量统计（个）", },
    //     legend:{...legend,data:['I 级','II 级','III 级'],},
    //     series: [
    //         {
    //        name:"I 级",
    //         type: 'bar',
    //         stack: '总量',
    //         label: {
    //            show: false,
    //             position: 'insideRight'
    //         },
    //         barWidth: 24, //柱的宽度
    //          color: "rgba(255, 57, 35, 1)",
    //         data: data1
    //     },
    //     {
    //         name: 'II 级',
    //         type: 'bar',
    //         stack: '总量',
    //         barWidth: 24, //柱的宽度
    //          color: "rgba(255, 209, 92, 1)",
    //         label: {
    //            show: false,
    //             position: 'insideRight'
    //         },
    //         data:  data2
    //     },
    //     {
    //         name: 'III 级',
    //         type: 'bar',
    //         stack: '总量',
    //         barWidth: 24, //柱的宽度
    //          color: "rgba(30, 214, 255, 1)",
    //         label: {
    //             show: false,
    //             position: 'insideRight'
    //         },
    //         data: data3
    //     },
    //     ]
    //   });
    // },
    },
}
</script>
<style lang="less" scoped>
.datastatistics_page{
  padding: 20px 25px;
  height:calc(100% - 58px);
  border: 2px solid rgba(31, 198, 255, 0.1);
  background: linear-gradient(
    180deg,
    rgba(2, 68, 102, 0.3),
    rgba(2, 60, 89, 0.3),
    #01121b 100%
  );
}
.top{
     display: flex;
    align-items: flex-end;
    justify-content: space-between;
    // 第一个
    .top1_div{
        margin-right: 20px;
        flex: 1;
        text-align: center;
        min-width: 182px;
        height: 92px;
        background: url("~@/assets/images/datatotal_icon3.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        p:nth-of-type(1){
            height: 48px;
            line-height: 48px;
            margin-bottom: 5px;
            font-weight: bold;
            margin-top: 10px;
            font-size: 32px;
        }
        p:nth-of-type(2){
            color: rgba(180, 192, 204, 1);
            font-size: 14px;
        }
    }
    .top1_div1{
        p:nth-of-type(1){
            color: rgba(0, 169, 255, 1);
        }
    }
    .top1_div2{
        p:nth-of-type(1){
            color: rgba(245, 231, 79, 1);
        }
    }
    .top1_div3{
        p:nth-of-type(1){
            color: rgba(255, 166, 0, 1);
        }
    }
    // 第二个
    .top2_div{
      margin-right: 20px;
      flex: 1;
        width: 202px;
        height: 95px;
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        background: url("~@/assets/images/datatotal_icon1.png");
         background-size: 100% 100%;
        background-repeat: no-repeat;
        padding: 0 10px;
        div:nth-of-type(1){
            p:nth-of-type(1){
                font-size: 24px;
                color: rgba(255, 209, 92, 1);
                font-weight: bold;
            }
             p:nth-of-type(2){
                color: rgba(203, 222, 237, 1);
             }
        }
        div:nth-of-type(2){
            text-align: center;
            p{
                span{
                    font-size: 12px;
                    display: block;
                    color: rgba(203, 222, 237, 1);
                }
            }
            p:nth-of-type(1){
               span:nth-of-type(1){
                    font-size: 18px;
                    color: rgba(149, 255, 96, 1);
                }
            }
            p:nth-of-type(2){
                margin-top: 6px;
                span:nth-of-type(1){
                      font-size: 18px;
                    color: #26D7FF;
                }
            }
        }
    }
    .top2_div1{
        div{
            margin-top: 8px;
        }
    }

    .top2_div2,.top2_div3{
        align-items: center;
    }
    // 第三个
    .top3_div{
      flex: 1;
        div{min-width: 162px;
            height: 45px;
            background: url("~@/assets/images/datatotal_icon2.png");
             background-size: 100% 100%;
            background-repeat: no-repeat;
            margin-top: 5px;
            text-align: center;
            p:nth-of-type(1){
                padding-top:3px;
                color: #95FF60;
                font-size: 18px;
                line-height: 24px;
            }
            p:nth-of-type(2){
                font-size: 12px;
                 color: rgba(203, 222, 237, 1);
            }
        }
    }
    .top3_div1,.top3_div2{
      margin-right: 20px;
    }
}
 #gaslinecounm {
    width: 33.33%;
    height:100% ;
    div {
      width: 100%;
      height: 100% !important;
    }
  }
  #changelinecounm,#gas2linecounm,#change2linecounm,#gas3linecounm{
    width: 100%;
    height:50%;
    div {
      width: 100%;
      height: 100% !important;
    }
  }
</style>
